/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text,  useTheme,} from "customize-easy-ui-component";
import {ReportViewProps,} from "../../common/base";
import {末尾链接, 落款单位地址,} from "../../common/rarelyVary";
import queryString from "query-string";
import {useItemsMapPressure} from "../../common/pressure";
import {ReportFirstPageHeadNmaNmbm, TailMenRowIspCheck} from "../../contain/rarelyVary";
import {ConclusionVw, } from "./Conclusion";
import {AppendixPageVw} from "./AppendixPage";
import {AttachedPageVw} from "./AttachedPage";
import {填写须知, 首页设备概况AnnuWt} from "./rarelyVary";

export const FormatOriginal: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
    const qs= queryString.parse(window.location.search);
    const printing =qs && !!qs.print;
    const [mapFxian]=useItemsMapPressure({ projects:orc.Projects });
    return (
        <React.Fragment>
            <div css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'}}}>
                <div css={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    "@media print": {height:'100vh', pageBreakInside: 'avoid',}
                }}>
                    {ReportFirstPageHeadNmaNmbm({theme, rep,op:true})}
                    <div>
                        <Text variant="h3" css={{textAlign: 'center',
                            "@media (min-width:690px),print and (min-width:538px)": {fontSize: theme.fontSizes[6],}
                        }}>压力容器年度委托检查原始记录<br/>
                        </Text>
                        <Text variant="h6" css={{textAlign: 'center',}}>（ FJJ/DH 10604-0-2021 ）</Text>
                    </div>
                    <div>{首页设备概况AnnuWt({theme, orc, rep})}</div>
                    <div css={{textAlign: 'center', "@media print": {pageBreakInside: 'avoid'}}}>
                        {落款单位地址}
                    </div>
                </div>
                {填写须知}

                {/*{记录目录({theme, orc, rep})}*/}
                <ConclusionVw op orc={orc} rep={rep}/>
                <TailMenRowIspCheck  orc={orc} rep={rep} cap='检查' scap='校核' href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>

                <AppendixPageVw op orc={orc} rep={rep}/>

                {mapFxian.get('附页附图')?.do && <AttachedPageVw op table={'附页表'} orc={orc} rep={rep} title={'压力容器年度记录报告'} tmcap='检查' tscap='校核'/>}
            </div>
            {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
        </React.Fragment>
    );
}
